<div ng-include="'views/components/org/case-template/toolbar.html'"></div>

<div class="mt-xs filter-panel" ng-include="'views/components/org/case-template/filters.html'" ng-show="$vm.filtering.context.showFilters"></div>

<!-- Filters preview  -->
<div class="row mt-xs">
    <div class="col-md-12 clearfix">
        <div class="pull-left">
            <h4>
                Case Template List ({{$vm.list.values.length || 0}} of {{$vm.list.total}})
            </h4>
        </div>

        <filters-preview filters="$vm.filtering.context.filters"
            on-clear-item="$vm.removeFilter(field)"
            on-clear-all="$vm.clearFilters()"></filters-preview>
    </div>
</div>

<!-- Datalist  -->
<div class="row mt-xs">
    <div class="col-md-12 mv-s" ng-show="$vm.list.total === 0">
        <div class="empty-message">No records</div>
    </div>

    <div class="col-md-12" ng-show="$vm.list.total > 0">
        <psearch control="$vm.list"></psearch>

        <table class="table table-striped case-list">
            <thead>
                <tr>
                    <th style="width: 10px;" class="p-0"></th>
                    <th>
                      <a href class="text-default" ng-click="$vm.sortByField('displayName')">
                        Display Name
                        <i ng-show="$vm.filtering.context.sort.indexOf('+displayName') === -1 && $vm.filtering.context.sort.indexOf('-displayName') === -1" class="fa fa-sort"></i>
                        <i ng-show="$vm.filtering.context.sort.indexOf('+displayName') !== -1" class="fa fa-caret-up"></i>
                        <i ng-show="$vm.filtering.context.sort.indexOf('-displayName') !== -1" class="fa fa-caret-down"></i>
                      </a>
                    </th>
                    <th width="150px">
                        <a href class="text-default" ng-click="$vm.sortByField('name')">
                          Name
                          <i ng-show="$vm.filtering.context.sort.indexOf('+name') === -1 && $vm.filtering.context.sort.indexOf('-name') === -1" class="fa fa-sort"></i>
                          <i ng-show="$vm.filtering.context.sort.indexOf('+name') !== -1" class="fa fa-caret-up"></i>
                          <i ng-show="$vm.filtering.context.sort.indexOf('-name') !== -1" class="fa fa-caret-down"></i>
                        </a>
                    </th>
                    <th width="80px">
                        <a href class="text-default" ng-click="$vm.sortByField('severity')">
                          Severity
                          <i ng-show="$vm.filtering.context.sort.indexOf('+severity') === -1 && $vm.filtering.context.sort.indexOf('-severity') === -1" class="fa fa-sort"></i>
                          <i ng-show="$vm.filtering.context.sort.indexOf('+severity') !== -1" class="fa fa-caret-up"></i>
                          <i ng-show="$vm.filtering.context.sort.indexOf('-severity') !== -1" class="fa fa-caret-down"></i>
                        </a>
                    </th>

                    <th width="80px">
                        Tasks
                    </th>
                    <th width="120px">
                        Custom Fields
                    </th>
                    <th style="width: 60px;">By</th>
                    <th style="width: 150px">
                        Dates
                        <a href class="text-default ml-xxxs" ng-click="$vm.sortByField('_createdAt')" uib-tooltip="Sort by creation date">
                            C.
                            <i ng-show="$vm.filtering.context.sort.indexOf('+_createdAt') === -1 && $vm.filtering.context.sort.indexOf('-_createdAt') === -1" class="fa fa-sort"></i>
                            <i ng-show="$vm.filtering.context.sort.indexOf('+_createdAt') !== -1" class="fa fa-caret-up"></i>
                            <i ng-show="$vm.filtering.context.sort.indexOf('-_createdAt') !== -1" class="fa fa-caret-down"></i>
                        </a>
                        <a href class="text-default ml-xxxs" ng-click="$vm.sortByField('_updatedAt')" uib-tooltip="Sort by last update date">
                            U.
                            <i ng-show="$vm.filtering.context.sort.indexOf('+_updatedAt') === -1 && $vm.filtering.context.sort.indexOf('-_updatedAt') === -1" class="fa fa-sort"></i>
                            <i ng-show="$vm.filtering.context.sort.indexOf('+_updatedAt') !== -1" class="fa fa-caret-up"></i>
                            <i ng-show="$vm.filtering.context.sort.indexOf('-_updatedAt') !== -1" class="fa fa-caret-down"></i>
                        </a>
                    </th>
                    <th style="width: 120px">Actions</th>
                </tr>
            </thead>

            <tbody>
                <tr ng-class="{true:'tr-warning'}[template.flag]" ng-repeat="template in $vm.list.values">
                    <td class="p-0 bg-tlp-{{template.tlp}} clickable" ng-click="$vm.addFilterValue('tlp', template.tlp)"></td>
                    <td>
                        <span>{{template.displayName || template.name}}</span>
                        <div class="case-tags flexwrap mt-xxs">
                            <span class="mr-xxxs text-muted"><i class="fa fa-tags"></i></span>
                            <strong class="text-muted mr-xxxs" ng-if="!template.tags || template.tags.length === 0">None</strong>
                            <tag-item ng-repeat="tag in template.tags track by $index" class="pointer"
                                ng-click="$vm.addFilterValue('tags', tag)" value="tag"></tag-item>
                        </div>
                    </td>
                    <td>
                        <div class="case-title wrap">
                            <a ng-click="">{{template.name}}</a>
                        </div>
                        <!-- <custom-field-labels ng-if="$vm.filtering.context.showAdvanced" custom-fields="template.customFields" on-field-click="$vm.addFilterValue(name, value)"></custom-field-labels> -->
                    </td>

                    <td class="center">
                        <div class="clickable" ng-click="$vm.addFilterValue('severity', template.severity)">
                            <severity active="false" value="template.severity"></severity>
                        </div>
                    </td>
                    <td>
                        <span>{{template.tasks.length || 0}}</span>
                    </td>
                    <td>
                        <span>{{template.customFields.length || 0}}</span>
                    </td>
                    <td class="nowrap">
                        <user user-id="template._createdBy" icon-only="true" icon-size="m"></user>
                    </td>
                    <td>
                        <div ng-class="{'text-bold': $vm.filtering.context.sort.indexOf('+_createdAt') !== -1 || $vm.filtering.context.sort.indexOf('-_createdAt') !== -1}">
                            C. <a href ng-click="$vm.addFilterValue('_createdAt', template._createdAt)">{{template._createdAt | shortDate}}</a>
                        </div>
                        <div ng-if="template._updatedAt > 0" ng-class="{'text-bold': $vm.filtering.context.sort.indexOf('+_updatedAt') !== -1 || $vm.filtering.context.sort.indexOf('-_updatedAt') !== -1}">
                            U. <a href ng-click="$vm.addFilterValue('_updatedAt', template._updatedAt)">{{template._updatedAt | shortDate}}</a>
                        </div>
                    </td>
                    <td class="text-center">
                        <a href class="btn btn-icon btn-clear" ng-click="$vm.showTemplate(template)">
                            <i class="text-info fa fa-edit"></i>
                        </a>
                        <a href class="btn btn-icon btn-clear" ng-click="$vm.exportTemplate(template)">
                            <i class="fa fa-download"></i>
                        </a>
                        <a href class="btn btn-icon btn-clear" ng-click="$vm.deleteTemplate(template)">
                            <i class="text-info fa fa-trash text-danger"></i>
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>

        <psearch control="$vm.list"></psearch>
    </div>
</div>
